<script setup lang="ts">

</script>

<template>
  <div class="case_wrapper">
    <h2 class="title">域名成交案例</h2>
    <div class="container">
      <ul>
        <li v-for="item in 18"><i class="icon icon1"></i><a href="/p/91059/" target="_blank" title="域名:sx.com">lanming</a></li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.case_wrapper{
  width: 100%;
  padding: 50px 0 30px;
  background: url(~/assets/imgs/case-bg.png) no-repeat center center;
  background-size: cover;
}

.case_wrapper h2.title{
  line-height: 1;
  margin-bottom: 30px;
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
}

.case_wrapper .container{
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}

.case_wrapper ul{
  margin-left: -20px;
}

.case_wrapper li{
  position: relative;
  z-index: 1;
  float: left;
  width: 183px;
  height: 50px;
  line-height: 50px;
  margin: 0 0 20px 20px;
  background: #F8F9FB;
  border-radius: 3px;
  text-align: center;
  overflow: hidden;
}

.case_wrapper li::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  background: var(--el-color-primary);
  z-index: -1;
  -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
  -ms-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
  transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
  -ms-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}

.case_wrapper li:nth-child(1)::before{
  background: #ff9f16;
}
.case_wrapper li:nth-child(2)::before{
  background: var(--el-color-primary);
}
.case_wrapper li:nth-child(3)::before{
  background: #e8895f;
}

.case_wrapper li:hover::before {
  opacity: 1;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -ms-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.case_wrapper li a{
  display: block;
  padding: 0 10px;
  font-size: 16px;
  color: #181C29;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case_wrapper .icon:nth-child(1) a{
  color: #FF7200;
}
.case_wrapper .icon:nth-child(2) a{
  color: #158AF7;
}
.case_wrapper .icon:nth-child(3) a{
  color: #BF6A45;
}

.case_wrapper li:hover a{
  color: #fff;
}

.case_wrapper li i.icon{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 36px;
  height: 29px;
}

.case_wrapper li:nth-child(1) i{
  background: url(~/assets/imgs/case-one.png) no-repeat;
  background-size: cover;
}

.case_wrapper li:nth-child(2) i{
  background: url(~/assets/imgs/case-two.png) no-repeat;
  background-size: cover;
}

.case_wrapper li:nth-child(3) i{
  background: url(~/assets/imgs/case-three.png) no-repeat;
  background-size: cover;
}</style>